<template>
  <div class="main-right">
    <div class="rt-echarts">
      <div class="echartTitles" @click="titleClick('exportType')">
        <div class="title-name">全省水质综合指数</div>
      </div>
      <div class="dataCharts">
        <div class="title">
          <span>指数排名</span>
        </div>

        <div class="list_lunbo">
          <div class="listhead listhead1">
            <span>排名</span>
            <span>区域</span>
            <span>综合指数</span>
          </div>
          <div
            class="listnav listnav1 scrollDiv"
            @mouseenter="stopCarousel"
            @mouseleave="startCarousel"
          >
            <ul>
              <li v-for="(item, index) in realTimeData" :key="index">
                <span>{{ item.paiming }}</span>
                <span>{{ item.quyu }}</span>
                <span>{{ item.zhishu }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="rc-echarts">
      <div class="echartTitles" @click="titleClick('plantType')">
        <div class="title-name">断面水质</div>
      </div>
      <div>
        <el-button @click="resetDateFilter">清除日期过滤器</el-button>
        <el-button @click="clearFilter">清除所有过滤器</el-button>
      </div>

      <div class="tablecontainer">
        <div class="tables">
          <el-table
            :header-cell-style="rowClass"
            ref="filterTable"
            :data="tableData"
            :height="filterTableHeight"
            :row-height="5"
            :cell-style="{
              background: 'rgb(2, 25, 43) !important',
              color: '#ededed  !important',
            }"
          >
            <el-table-column
              prop="date"
              label="日期"
              sortable
              width="90"
              column-key="date"
              :filters="[
                { text: '2016-05', value: '2016-05' },
                { text: '2016-06', value: '2016-06' },
                { text: '2016-07', value: '2016-07' },
                { text: '2016-08', value: '2016-08' },
              ]"
              :filter-method="filterHandler"
            >
            </el-table-column>
            <el-table-column prop="river" label="河流名称" width="50">
            </el-table-column>
            <el-table-column prop="cutface" label="断面名称" width="95">
            </el-table-column>
            <el-table-column prop="operation" label="执行标准" width="50">
            </el-table-column>
            <el-table-column prop="quality" label="质量" width="50">
            </el-table-column>
            <el-table-column
              prop="tag"
              label="标签"
              width="95"
              :filters="getTagFilters()"
              :filter-method="filterTag"
              filter-placement="bottom-end"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.tag === '国控' ? 'primary' : 'success'"
                  disable-transitions
                  >{{ scope.row.tag }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<script>
import * as echarts from "echarts";

export default {
  props: {
    rightData: {
      type: Object, // 假设rightData是一个对象，根据实际情况调整类型
      required: true, // 如果rightData是必需的，可以设置为true
    },
  },

  data() {
    return {
      tableData: [
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "省控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-06",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "省控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "省控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
        {
          date: "2016-05",
          river: "赣江",
          cutface: "阳江",
          operation: "Ⅲ",
          quality: "Ⅲ",
          tag: "国控",
        },
      ],
      //指数排名数据
      realTimeData: [
        { paiming: "1", quyu: "宜春a县", zhishu: "2.74" },
        { paiming: "2", quyu: "宜春b县", zhishu: "2.34" },
        { paiming: "3", quyu: "宜春c县", zhishu: "2.14" },
        { paiming: "4", quyu: "宜春d县", zhishu: "2.04" },
        { paiming: "5", quyu: "吉安遂川县", zhishu: "2.04" },
        { paiming: "6", quyu: "吉安遂川县", zhishu: "1.990" },
        { paiming: "7", quyu: "吉安遂川县", zhishu: "1.654" },
        { paiming: "8", quyu: "吉安遂川县", zhishu: "1.132" },
        { paiming: "9", quyu: "吉安遂川县", zhishu: "1.000" },
        { paiming: "10", quyu: "吉安遂川县", zhishu: "0.999" },
      ],
      timer: null,
      configs: {},
      newsType: {
        propOption: [],
        title: "园区动态",
        times: false,
      },

      firstData: [],
      secondData: [],
      thirdData: [],
      allNum: 0,
      personNum: 0,
      filterTableHeight: 560,
      exportType: {
        propOption: [],
        title: "水质综合指数",
        times: false,
      },
      plantType: {
        title: "断面水质",
        times: false,
      },
    };
  },
  watch: {
    rightData: {
      handler(newValue) {
        if (!newValue) return;
        if (newValue.top.length > 0) {
          this.firstData = newValue.top.map((v) => {
            this.personNum += v.num;
            return {
              name: v.type,
              value: v.num,
            };
          });
        }
        if (newValue.center.length > 0) {
          newValue.center.forEach((v, i) => {
            let data = {
              value: Number(v.area),
              name: v.plantName,
              unit: v.unit,
            };
            this.allNum += Number(v.area);
            this.secondData.push(data);
          });
        }
        if (newValue.bottom.length > 0) {
          this.thirdData = newValue.bottom.map((v) => {
            return {
              name: v.variety,
              value: Number(v.val),
            };
          });
        }

        this.$nextTick(() => {
          // this.firstChart();
        });
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
     //排名播放
    this.startCarousel();
  },
  //排名悬停
  beforeDestroy() {
    this.stopCarousel();
  },
  methods: {
    //设置表格样式
    rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if (columnIndex === 0 || columnIndex === 1) {
          return {
            background: "rgb(7, 46, 79)  !important",
            color: "#ededed  !important",
          }; //不用这种写法不生效
        } else {
          return { background: "rgb(7, 46, 79)  !important" };
        }
      }
      return null;
    },

    //清除日期过滤器
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    //清除所有过滤器
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },

    //表格标签过滤
    filterTag(value, row) {
      return row.tag === value;
    },
    //表格日期过滤
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    //表格标签过滤
    getTagFilters() {
      const uniqueTags = [...new Set(this.tableData.map((item) => item.tag))];
      return uniqueTags.map((tag) => ({ text: tag, value: tag }));
    },

    //排名播放
    startCarousel() {
      this.timer = setInterval(() => {
        this.rotateData();
      }, 1500); // 每1.5秒轮播一次
    },
    //排名悬停
    stopCarousel() {
      clearInterval(this.timer);
    },
      //排名播放
    rotateData() {
      const firstItem = this.realTimeData.shift();
      this.realTimeData.push(firstItem);
    },
    firstChart() {
      let myChart = echarts.getInstanceByDom(this.$refs.initCharts);
      if (myChart == undefined) {
        myChart = echarts.init(this.$refs.initCharts);
      }
      myChart.clear();

      let option = 1;

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },

    //title点击
    titleClick(e) {
      this.$emit("titleHandler", this[e]);
    },
  },
};
</script>

<style lang="less" scoped>
.el-table--border::after,
.el-table--group::after {
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  background: white;
  color: white;
}
/* 整体容器样式 */
.list_lunbo {
  border: red solid 1px;
  height: 160px;
  background-color: rgb(2, 25, 43); /* 深色背景 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
  margin: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 表头样式 */
.listhead {
  display: flex;
  justify-content: space-between;
  padding: 5px 5px;
  background-color: rgb(7, 46, 79); /* 更深的背景色 */
  color: white; /* 白色字体 */
  font-weight: bold;
}

/* 表头中的每个项目 */
.listhead span {
  flex: 1;
  text-align: left;
}

/* 列表导航样式 */
.listnav {
  overflow-y: auto; /* 垂直滚动条 */
}

/* 列表项样式 */
.listnav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.listnav li {
  display: flex;
  justify-content: space-between;
  padding: 4px 11px;
  border-bottom: 1px solid #333; /* 分隔线 */
  color: white; /* 白色字体 */
}

/* 悬停效果 */
.listnav li:hover {
  background-color: #3a3a4b; /* 悬停时的背景色 */
}

/* 列表项中的每个项目 */
.listnav li span {
  flex: 1;
  text-align: left;
}
.main-right {
  background-color: transparent;
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .rt-echarts {
    height: 35%;
    border: red solid 1px;
    width: 100%;

    display: flex;
    flex-direction: column;

    .dataCharts {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      border: 1px saddlebrown solid;
      .title {
        border: 1px saddlebrown solid;
        font-size: 14px;
        font-weight: 500;
        color: #71f286;
        width: 100%;
        height: 25px;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        padding-left: 0; /* 移除左侧内边距 */
      }
    }
  }

  .rc-echarts {
    border: 1px solid rgb(255, 255, 255);
    height: 65%;
    width: 100%;
    background-color: transparent;

    display: flex;
    flex-direction: column;
    .tablecontainer {
      flex: 1; /* 占满剩余的高度 */
      display: flex;
      background-color: transparent;

      // height: calc(100%-100px);
      .tables {
        border: solid greenyellow 1px;
        width: 100%;
        height: calc(100% - 192px);
        // flex: 1;
      }
    }
  }
}

.news {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.echartTitles {
  cursor: pointer;
  padding: 10px;
  background-color: #064b73;
  color: #fff;
}

.news-list {
  width: 100%;
  flex: 1;
}
</style>
